import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import { message } from 'antd'
import { WeaRichText } from 'ecCom'
import CommentBar from "./CommentBar"
import ComVar from "../ComVar"
import WeaUtils from '../wea-utils'
import WeaBlogDict from '../wea-comment-dict';
import * as Util from '../../../../util/index'
import { WeaLocaleProvider } from "ecCom";
const {DateFormat} = WeaUtils
const innerHref = WeaBlogDict.href;
const getLabel = WeaLocaleProvider.getLabel;

@inject('checkMatterStore')
@observer
class CommentList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isPrivate: false,
            commenting: false,
            showSlide: false
        }
    }
    componentDidMount() {
        let dom = ReactDOM.findDOMNode(this);
        WeaUtils.imgZoom(dom, ".g-cl-content");
    }

    componentDidUpdate() {
        let dom = ReactDOM.findDOMNode(this);
        WeaUtils.imgZoom(dom, ".g-cl-content");
    }
    render() {
        const {commenting, isPrivate,showSlide} = this.state,
            {data, blogId, user, _key, weiboCKEditorConfig,showSlideEdit} = this.props,
            {id, userid, userName, createdate = "", createtime = "", content, comefrom, comefromStr, commentType, isCanDelete,instruUserName,instruUserid} = data

        let ckeId = "";
        let replyName = "";
       
        if (user.id) {
            if (data.id) {
                ckeId = `wea_ckeditor_weibo_${blogId || ""}_${user.id}_comment_list_${data.id}`
            } else {
                ckeId = `wea_ckeditor_weibo_${blogId || ""}_${user.id}_comment_list_anruo_${_key}`
            }
        }
        if(instruUserid){
            replyName = `  回复  ${instruUserName}`
        }
        return (
            <li>
                <div className="g-cl-title">
                       <a className="g-clt-item g-clt-name" href={`javaScript:openhrm(${userid});`} onClick={e => window.pointerXY(e)}  >{`${userName}${replyName}` || ""}</a>
                    <span className="g-clt-item g-clt-date">
                        {DateFormat(createdate + " " + createtime, "yyyy年MM月dd日 HH:mm")}
                    </span>
                    {
                        commentType * 1 ? (
                            <span className="g-clt-item g-clt-private">({getLabel('83151',"私评")})</span>
                        ) : ""
                    }
                    {
                        comefrom * 1 ? (
                            <span
                                className="g-clt-item g-clt-from">{comefromStr}</span>
                        ) : ""
                    }
                    {
                        isCanDelete * 1 && showSlideEdit == true ? (
                            <span
                                className="g-clt-item g-clt-delete icon-blog-delete"
                                title={getLabel('91',"删除")}
                                onClick={this.deleteComment.bind(this, ckeId)}
                            />
                        ) : null
                    }
                    {
                      showSlideEdit == true ? (
                        <span
                            className="g-clt-item g-clt-add icon-blog-Comment"
                            onClick={this.addComment.bind(this, ckeId)}
                            title={getLabel('675',"评论")}
                            style={(commenting ? {color: "#32a8ff", cursor: "default"} : {
                                color: "#2e4b7c",
                                cursor: "pointer"
                            })}
                        /> ) : null
                  }
                </div>
                <div
                    className="g-cl-content"
                    dangerouslySetInnerHTML={{__html: `<div class="g-ckeditor-content">${content}</div>`}}
                />
                {
                    ckeId ? (
                        <div>
                        	{ commenting && <div className='g-ckeditor-import-ecCom' style={{padding: "12px 12px 0 12px", minHeight: ComVar.commentMinHeight + 64}}>
		                        	<WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@thjsiy`}
        		                  id={ckeId}
					                    ref={ckeId}
					                    /* value={`<a href="${innerHref.blog(userid)}" target="_blank">@${userName}</a>&nbsp;`} */
					                    ckConfig={{
					                    	toolbar:[
									            { name: 'document', items: [ 'Source'] },
									            { name: 'paragraph', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList' ] },
									            { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
									            { name: 'colors', items: [ 'TextColor' ] },
									            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', ] },
									            { name: 'insert', items: [ 'Image', 'Table', 'Smiley'] }
									        ],
									        extraPlugins: 'autogrow',
                                            height: ComVar.commentMinHeight,
                                            autoGrow_minHeight:ComVar.commentMinHeight,
					                        autoGrow_maxHeight: 300,
					                        removePlugins: 'resize',
					                        uploadUrl: '/api/blog/fileupload/uploadimage',
					                    }}
					                    bottomBarConfig
					                    onChange={v=>{}}
					                    onStatusChange={s => {}}
					                    onToolsChange={Util.transfStr}
					            	/>
				            	</div>
			            	}
                            {commenting?<CommentBar ecId={`${this && this.props && this.props.ecId || ''}_CommentBar@rq6g5c`}
                                checked = {this.state.isPrivate}
                                setPrivate={this.setPrivate}
                                submitComment={this.submitComment.bind(this, ckeId)}
                                cancelComment={this.cancelComment.bind(this, ckeId)}
                                style={{ margin: "12px 12px 10px 12px"}}
                            />:''}
                        </div>
                    ) : <div/>
                }
            </li>
        )

    }

    deleteComment = () => {
        let {deleteComment,taskId,pageindex,pagesize} = this.props.checkMatterStore
        let {blogId, data, user} = this.props,
            {id} = data

        let params = {
           id: id
        }
        deleteComment(
            params,
            {
              "taskId":taskId,
              "pageindex":pageindex,
              "pagesize":pagesize
            }
        )
    }
    //对评论进行评论
    addComment = (ckeId) => {
        let {getInstype} = this.props.checkMatterStore;
        const {user} = this.props;
        user.instructType == "1"?getInstype("3") : user.instructType == "0" ? getInstype("2") : null
        if (!this.state.commenting) {
            let {blogId, data} = this.props,
                {userid, userName} = data,
                succeedExec = () => {
                    this.setState({commenting: true})
                },
                failExec = () => {
                    this.setState({commenting: false})
                }
            succeedExec()
        }
    }

    setPrivate = (event) => {
        this.setState({isPrivate: event.target.checked})
    }

    submitComment = (ckeId) => {
        let contents = this.refs[ckeId].getData(),
            {data, blogId,  user} = this.props,
            { userName, userid, id, bediscussantid} = data;
        let ckref = this.refs[ckeId];
        if(this.refs[ckeId].wrappedInstance){
            ckref = this.refs[ckeId].wrappedInstance
            contents = this.refs[ckeId].wrappedInstance.getData()
        }else{
            ckref = this.refs[ckeId]
            contents = this.refs[ckeId].getData()
        }
        if (!ckref.checkMode()) {
            message.error(getLabel('384536',"不能以源码模式或markdown模式保存，请将编辑器切换到可视化模式"));
            return;
        }
        let {editWeibo,taskId,instype,pageindex,pagesize} = this.props.checkMatterStore;
        let params = {
            content: contents,
            instructid: id,
            taskId:taskId,
            instype: instype ,
        }
        if (blogId) params.instructTopid = blogId
        editWeibo(
            params,
            {
                "taskId":taskId,
                "pageindex":pageindex,
                "pagesize":pagesize
            }
        );
        this.cancelComment(ckeId)
    }

    cancelComment = (ckeId) => {
        this.setState({commenting: false,isPrivate: false})
    }
}

export default function CommentList(props) {
    const {data, blogId,  user, checkMatterStore, weiboCKEditorConfig,showSlideEdit} = props
    if (data && data.length > 0) {
        return (
            <ul className="g-comment-list">
                {
                    data.map(
                        (item, key) => {
                            return (
                                <CommentList ecId={`${this && this.props && this.props.ecId || ''}_CommentList@2cux9a@${key}`}
                                    _key={key}
                                    data={item}
                                    user={user}
                                    blogId={blogId}
                                    checkMatterStore={checkMatterStore}
                                    weiboCKEditorConfig={weiboCKEditorConfig}
                                    showSlideEdit={showSlideEdit}
                                />
                            )
                        }
                    )
                }
            </ul>
        )
    } else {
        return <div/>
    }
}
